<template lang="html">
	<div>
	<!-- 头部 -->
		<div id="header_common">
			<router-link to="/Orders">
				<div class="header_right">
					<a href="javascript:;">
						<img src="../assets/allsendorder.png">
					</a>
				</div>
			</router-link>
			<h2>全国送</h2>
		</div>
		<!-- 内容 -->
		<main id="main_warp" >
			<div class="div_div"></div>
			<!-- TOP -->
			<p id="back-to-top">
				<a href="javascript:;" @click="fn">
					  <span></span>
				</a>
			</p>
			<!-- 购物车 -->
			<div id="back-top-to-t">
				<router-link to="/Cart">
					<a href="javascript:;"class="div_top-t">
						<span></span>
					</a>
				</router-link>
			</div>
			<!-- 主题 -->
			<div class="main_banner">
				<a href="javascript:;">
					<img class="main_banner-t" src="../assets/all_sendbanner.jpg">
				</a>
				<img class="main_banner-t" src="../assets/title.jpg">
			</div>
			<!-- 内容 -->
			<div class="main_list-canter">
				<div class="box" v-for="x in marketData">
					<router-link to="/Market2">
						<a href="javascript:;">
							<dl class="box_top">
								<dt>
									<img class="main_banner-t" :src="x.share_img">
								</dt>
								<dd>
									<h4 style="color:#424644">{{x.goods_name}}</h4>
									<p>{{x.goods_info}}</p>
								</dd>
							</dl>
						</a>
						<div class="box_bottom">
							<a href="javascript:;">
								<dl class="box_bottom-btn">
									<dt>
										{{x.sell_price}}
										<span>元/份</span>
									</dt>
									<dd>
										<button>单独买</button>
									</dd>
								</dl>
							</a>
						</div>
					</router-link>
				</div>
			</div>
		</main>
		<!-- 底部 -->
		<div class="div_banner-b">
			<img class="main_banner-t" src="../assets/bottom.png">
		</div>
	</div>
</template>

<script>
	import Vue from "vue"
  import VueResource from "vue-resource"
  Vue.use(VueResource);
	import jQuery from "../router/jquery-1.11.2"
	export default{
    data () {
      return {
        marketData: []
      }
    },
    mounted () {
      this.$http.get("../static/xianpin.json").then(function (res) {
        this.marketData = JSON.parse(res.bodyText).data;
      });
    },
    methods: {
      //TOP 每10毫秒减少10向上滑动，高度为0时停止定时器
      fn: function () {
        $(window).scroll(function () {
          //页面滚动的距离大于100时
          if ($(window).scrollTop() >= 200) {
            //显示按钮
            $('.back-to-top').fadeIn(300);
          } else {
            //按钮隐藏
            $('.back-to-top').fadeOut(300);
          }
        });
        //点击到顶部按钮后回到顶部
        $('.back-to-top a').click(function () {
          $('html,body').animate({scrollTop: '0px'}, 400);
        });
      }
    }
  }

</script>
<style lang="css">
/*=== Market.vue头部样式适用于 Market2.vue中的头部样式 ===*/
/*=========== 头部 ==============*/
	#header_common{
		width:100%;
		height:2.394rem;
		position:fixed;
		background-color:#fff;
	}
	#header_common .header_right{
		position:absolute;
		right:.5rem;top:0;
		z-index:2;
	}
	#header_common .header_right a{
		display:block;
		height:2.394rem;
		line-height:2.394rem;
		color:#ffc000;
		font-size:.24rem;
		float:right;
		width:1.75rem;
	}
	#header_common .header_right a img{
		width:100%;
		vertical-align:middle;
	}
	#header_common h2{
		height:2.394rem;
		line-height:2.394rem;
		text-align:center;
		color:#ffc000;
		font-size:1rem;
		border-bottom:1px solid #cacaca;
	}
/*========== 主题 ==========*/
	#main_warp{
		width:100%;height:100%;
		max-width:48rem;
		min-width:16rem;
		margin:0 auto;
		background:#f1f1f1;
	}
	#main_warp .div_div{
		width:100%;
		height:2.394rem;
	}
	/*=========== TOP ===========*/
	#back-to-top{
		position:fixed;
		bottom:4.5rem;
		right:.9rem;
	}
	#back-to-top a,#back-top-to-t a{
		text-align:center;
		text-decoration:none;
		color:#d1d1d1;
		width:2.5rem;
		display:block;
	}
	#back-to-top a span{
		background:url(../assets/up_top.png) no-repeat;
		width:2.5rem;background-size: 100% 100%;
		display:block;height:2.5rem;
	}
	/*========== 购物车 ============*/
	#back-top-to-t{
		position: fixed;
		bottom: 7.38rem;
		right: .86rem;
	}
	#back-top-to-t a{
		border: 1px solid #e2e2e2;
		background: #fff;
		border-radius: 5px;
	}
	#back-top-to-t .div_top-t{
		background:url(../assets/foot3.png) no-repeat;
		width: 2.5rem;background-size: 100% 100%;
		display: block;height: 2.5rem;
	}
/*============ 内容 ===========*/
	#main_warp .main_banner{
		width:100%;
	}
	#main_warp .main_banner a{
		outline:none;
		text-decoration:none;
	}
	#main_warp .main_banner img{
		width:100%;
	}
	#main_warp .main_list-canter{
		width:95%;margin:0 auto;
	}
	#main_warp .main_list-canter>.box{
		width:100%;
		background:#FFFFFF;
		margin-top:.3rem;
	}
	#main_warp .main_list-canter>.box a{
		display:block;
	}
	#main_warp .main_list-canter>.box .box_top{
		width:100%;
	}
	#main_warp .main_list-canter>.box .box_top dt{
		width:100%;
	}
	#main_warp .main_list-canter>.box .box_top dt img{
		width:100%;
	}
	#main_warp .main_list-canter>.box .box_top dd{
		width:14.5rem;margin:0 auto;
		border-bottom:1px solid #e2e2e2;
		padding-bottom:.15rem;
	}
	#main_warp .main_list-canter>.box .box_top dd h4{
		font-family:"微软雅黑";
		font-size:.9rem;
		margin-top:.22rem;
		font-weight:bold;
	}
	#main_warp .main_list-canter>.box .box_top dd p{
		font-family:"微软雅黑";
		margin-top:.2rem;
		font-size:.67rem;
		color:#6f6f6f;
	}
	#main_warp .main_list-canter>.box .box_bottom{
		overflow:hidden;opsition:absolute;
		margin:0 auto;margin-left:47%;
	}
	#main_warp .main_list-canter>.box .box_bottom a{
		display:block;
	}
	#main_warp .main_list-canter>.box .box_bottom dl{
		margin-top:.3rem;
		margin-bottom:.05rem;
	}
	#main_warp .main_list-canter>.box .box_bottom .box_bottom-btn{
		width:7.5rem;border:1px solid #333333;
		overflow:hidden;border-radius:3px;
		margin-right:.1rem;
	}
	#main_warp .main_list-canter>.box .box_bottom .box_bottom-btn dt{
		float:left;width:5rem;height:1.4rem;
		line-height:1.4rem;text-align:center;
		font-family:"微软雅黑";font-size:.8rem;
		color:#333333;font-weight:bold;
	}
	#main_warp .main_list-canter>.box .box_bottom .box_bottom-btn dt span{
		font-size:.35rem;color:#333333;
	}
	#main_warp .main_list-canter>.box .box_bottom .box_bottom-btn dd{
		width:2.5rem;height:1.4rem;line-height:1.4rem;
		text-align:center;float:right;overflow:hidden;
	}
	#main_warp .main_list-canter>.box .box_bottom .box_bottom-btn dd button{
		border:none;font-family:"微软雅黑";
		font-size:.65rem;color:#fff;display:block;
		background-color:#424644;width:100%;
		font-weight:100%;height:1.4rem;
	}
/*========= 底部 ==============*/
	.div_banner-b{
		width:100%;margin-bottom:2.5rem;
	}
	.div_banner-b img{
		width:100%;
	}
</style>
